// 世界空间中的单位向量和局部空间中的单位向量有什么区别，我们写一个例子来区分：
// 我们在每一帧中让物体绕局部空间的正y轴旋转一度

// 绕着局部空间/世界空间中的单位向量以弧度旋转，单位向量并没有发生变化，但是旋转轴却并不一样了。这是因为在开启旋转动画前，物体已经绕z轴旋转了45度。这时物体的本地坐标系发生了改变，其坐标原点没有变化，坐标空间发生了旋转。而旋转轴虽然还是正y轴，但是y轴的方向已经发生了变化。所以局部空间中的单位向量都是基于当前的局部空间坐标轴方向，世界空间中的单位向量也是基于世界空间的坐标轴方向。

import * as THREE from 'three';
import { useEffect,memo } from 'react'

const Demo1=()=> {
  useEffect(() => {
     /** 创建场景 */
      const scene = new THREE.Scene();
      // 创建一个立方缓冲几何体
      const geometry = new THREE.BoxGeometry( 100, 100, 100 )
      // 创建材质
      const material = new THREE.MeshLambertMaterial( {color: 0xffffff} );
      // 生成带有材质的物体
      const cube = new THREE.Mesh( geometry, material );
      //如果我们在动画开始前先绕z轴旋转物体45度
      // 物体绕z轴旋转45度
      cube.rotateZ(Math.PI / 4)
      // 把物体添加进场景中
      scene.add( cube );
      // 创建光源
      // 环境光，没有特定的方向
      const ambientLight = new THREE.AmbientLight(0x444444)
      scene.add(ambientLight)
      // 平行光，类似于生活中的太阳光
      const directionalLight = new THREE.DirectionalLight(0xabcdef, 1)
      directionalLight.position.set(400, 200, 300)
      scene.add(directionalLight)
      /** 相机设置 */
      const width = window.innerWidth; //窗口宽度
      const height = window.innerHeight; //窗口高度
      const k = width / height; //窗口宽高比
      const s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(95, 0, -178); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      /** 创建渲染器对象 */
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      // renderer.setClearColor(0x888888, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

      function render(){
        renderer.render(scene, camera); //执行渲染操作
      }
      // 设置一个单位向量,该向量是正y轴方向
      const axis = new THREE.Vector3(0,1,0)
      const animation = ()=>{
        requestAnimationFrame(()=>{
          // 物体在每一帧中都旋转一弧度

          //绕着世界空间中的单位向量以弧度旋转。
          cube.rotateOnWorldAxis(axis, Math.PI / 180)  
          
          //绕着局部空间中的单位向量以弧度旋转。
          //cube.rotateOnAxis(axis, Math.PI / 180)   
          render()
          animation()
        })
      }
      animation() 
  }, [])
  return (
    <div className="Demo1"></div>
  )
}
export default memo(Demo1)